<script setup lang="ts" name="PageCard">
import { propTypes } from '@/utils/propTypes'
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()
const { systemConfig, pageLoading } = storeToRefs(appStore)

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('page-card')

defineProps({
  direction: propTypes.string.def('column'), // row | row-reverse | column | column-reverse
  center: propTypes.bool.def(false),
  noPadding: propTypes.bool.def(false)
})
</script>

<template>
  <div v-loading="pageLoading && systemConfig.loadingType === 'content'" :class="[prefixCls, noPadding ? 'no-padding' : '']">
    <div :class="[`${prefixCls}__body`, center ? 'is-center' : '']">
      <slot />
    </div>
    <Footer v-if="systemConfig.isFooterEnable" />
  </div>
</template>

<style scoped lang="scss">
$prefix-cls: #{$namespace}-page-card;

.#{$prefix-cls} {
  display: flex;
  flex-direction: column;
  flex: 1;

  &__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: v-bind(direction);
    padding: var(--el-space);

    &.is-center {
      align-items: center;
      justify-content: center
    }
  }

  &.no-padding {
    .#{$prefix-cls}__body{
      padding: 0;
    }
  }
}
</style>
